import React from 'react'
import ReactDOM from 'react-dom'
export default function Count(){

  const [count,setCount] = React.useState(0)  
  const [name,setName] = React.useState('Jimmy')  

  console.log('count一变就重新渲染')
  /*
    react.useEffect() 这个钩子可以让我们在函数组件中使用生命周期
    传递两个参数
      第一个参数是一个函数
        在监听数据的变化的时候就会执行一次  
          当第二个参数传递一个参数的时候 页面刚进入也会走一次这个回调函数 -- 这里相当于 componentDidMound() 的使用了
          除此之外还可以写一个返回值 返回值也是一个函数  这个函数在组件卸载的时候会执行 就相当于  componentWillUnmoned()
      第二个参数是一个数组
        第二个参数如果不传递 就会监听页面上的所有元素 只要一变就会执行函数里面的内容
        如果想要监听个别数据 只要在数据里面写上对应要监听的数据即可
          如: [name,count] 表示监听 name 和 count的变化 只要这两个变化了 就会更走函数
          这样写相当于 watch 的使用
  */ 

  /*
    总结：
      useEffect这个钩子使用起来还是相对比较复杂一点的  
      第一个参数是回调函数 当监听的数据改变就会触发这个回调
      第二个是监听的数据

      第一个参数还可以返回一个函数 这个函数在组件被卸载的时候也会执行
  */ 

  React.useEffect(()=>{
    console.log('页面加载了')
    return ()=>{
      console.log('走到这里相当于组件被卸载了')
    }
  },[name])

  function addOne(){
    // setCount(count+1) 方法1 直接传递一个要改变的值
    setCount(preCount=>preCount+1) // 方法2 传递一个函数 返回值是要修改的值
  }

  function changeName(){
    setName('XUEXUE')
  }

  
  
  function unMound(){
    // 卸载组件
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    <div>
      <h2>当前的值为：{count},{name}</h2>
      <button onClick={addOne}>点我+1</button>
      <button onClick={changeName}>点我改名</button>
      <button onClick={unMound}>卸载组件</button>
    </div>
  )
}